<html>

<head>
    <title>第一章节</title>
    <link rel="shortcut icon" href="https://avatar.gitee.com/uploads/72/727072_zhujierong.png!avatar100?1491638052"
        type="image/x-icon">
    <script src="../three/build/three.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>


    <script>
        function init() {
            let scene = new THREE.Scene();
            let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
            let renderer = new THREE.WebGLRenderer();

            renderer.setClearColor(0xeeeeee)
            renderer.setSize(window.innerWidth, window.innerHeight)
            document.body.appendChild(renderer.domElement)

            // PlaneGeometry : 平面几何体
            let planGeometry = new THREE.PlaneGeometry(60, 20, 1, 1)
            let planMaterial = new THREE.MeshBasicMaterial({
                color: 0xcccccc
            })

            let plan = new THREE.Mesh(planGeometry, planMaterial)
            plan.rotation.x = -0.5 * Math.PI
            plan.position.x = 15
            plan.position.y = 0
            plan.position.z = 0
            scene.add(plan)

            let cubeGeometry = new THREE.BoxGeometry(4, 4, 4)
            var cubeMaterial = new THREE.MeshBasicMaterial({
                color: 0xff0000,
                wireframe: true
            })
            var cube = new THREE.Mesh(cubeGeometry, cubeMaterial)

            cube.position.x = -4
            cube.position.y = 3
            cube.position.z = 0

            scene.add(cube)

            let sphereGeometry = new THREE.SphereGeometry(4, 20, 20)
            let sphereMaterial = new THREE.MeshBasicMaterial({
                color: 0x7777ff,
                wireframe: true
            })

            let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
            sphere.position.x = 20
            sphere.position.y = 4
            sphere.position.z = 2
            scene.add(sphere)

            camera.position.x = -30
            camera.position.y = 40
            camera.position.z = 30
            camera.lookAt(scene.position)

            function animate() {
                requestAnimationFrame(animate)
                // cube.rotation.x += 0.01
                // cube.rotation.y += 0.01
                renderer.render(scene, camera) //场景与摄像机渲染
            }
            animate();

        }
        window.onload = init
    </script>
</body>

</html>